{% extends "base.html" %}
{% block breadcrumb_current %}
    库存管理 > 库存物料
{% endblock %}
{% block content %}

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    
    <div class="bg-light p-3 shadow-sm">
        <div class="d-flex justify-content-between align-items-center">
            <h5 style="color: #417690; margin: 0;">库存物料</h5>
            <div class="d-flex" style="height: 32px;">
                <form method="get" class="mb-3 me-2" style="width: 300px;">
                    <span class="input-group" style="height: 32px;">
                        <input type="text" 
                            name="search" 
                            class="form-control" 
                            placeholder="搜索物料名称、仓库..." 
                            value="{{ search_query }}"
                            style="height: 32px; padding: 0.25rem 0.5rem;">
                        {% if search_query %}
                        <button type="button" class="btn btn-link text-secondary" 
                            onclick="this.form.querySelector('input[name=\'search\']').value='';this.form.submit()"
                            style="border: none; box-shadow: none;">
                            <i class="fas fa-times"></i>
                        </button>
                        {% endif %}
                        <button type="submit" class="btn btn-primary" style="height: 32px; line-height: 1;">
                            <i class="fas fa-search"></i>
                        </button>
                    </span>
                </form>
                <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm">返回首页</a>
            </div>
        </div>
    </div>


<div class="container mt-4">
    <!-- 表格展示，初始隐藏 -->
    <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
        <thead>
            <tr>
                <th>物料名称</th>
                <th>所在仓库</th>
                <th>库存数量</th>
                <th><i class="fa-solid fa-hand-point-up"></i> 申请出入库</th>
                <th><i class="fa-solid fa-clock-rotate-left"></i> 查看历史记录</th>
            </tr>
        </thead>
        <tbody>
            {% for inventory in inventories %}
            <tr class="custom-row-color">
                <td>{{ inventory.material.material }}</td>
                <td>{{ inventory.warehouse.warehouse }}</td>
                <td>{{ inventory.quantity }}</td>
                <td><a href="{% url 'inventoryrecord_add' inventory.id %}">申请</a></td>
                <td><a href="{% url 'inventoryhistory_list' inventory.id %}">查看</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 卡片展示，初始隐藏 -->
    <div id="mobile-view" style="display: none;">
        {% for inventory in inventories %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ inventory.material.material }}</h5>
                <p class="card-text">
                    <strong>所在仓库:</strong> {{ inventory.warehouse.warehouse }}<br>
                    <strong>库存数量:</strong> {{ inventory.quantity }}
                </p>
                <a href="{% url 'inventoryrecord_add' inventory.id %}" class="btn btn-primary me-2">
                    <i class="fa-solid fa-hand-point-up"></i> 申请出入库
                </a>
                <a href="{% url 'inventoryhistory_list' inventory.id %}" class="btn btn-secondary">
                    <i class="fa-solid fa-clock-rotate-left"></i> 查看历史记录
                </a>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 设备检测脚本 -->
    <script>
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const desktopView = document.getElementById('desktop-view');
            const mobileView = document.getElementById('mobile-view');

            if (isMobile()) {
                mobileView.style.display = 'block';
            } else {
                desktopView.style.display = 'table';
            }
        });
    </script>

    <!-- 添加分页导航 -->
    <div class="pagination justify-content-center">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="First" style="color: #417690;">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous" style="color: #417690;">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}

                <li class="page-item active">
                    <span class="page-link" style="background-color: #417690; border-color: #417690;">
                        {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
                    </span>
                </li>

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next" style="color: #417690;">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last" style="color: #417690;">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

{% endblock %}